Is there any util with we can build project using gulp on vendor/src files same as symfony assetic system?
I mean bundle inheritance.
My gulp is set on vendor files and compile resources to web catalog, but i didn't found possibility that gulp recognize if files were override by my bundle in src/ catalog
I think you should use the plugin Gulp Watch (https://www.npmjs.com/package/gulp-watch/) and make a watch task that will check if a file changed.
If a file change you gulp watch task will launch another task to compile your files or just copy them.
Your watch should look like this
gulp.task('watch', function () {
gulp.watch(app + '/scss/**/*.scss', ['sass']); // If a scss file change it will run my sass task
gulp.watch(app + '/img/**/*.{jpg,jpeg,png,gif,svg}', ['images']); // If there is a new image it will run my images task
});
You can do it with other file html js etc
I hope this will help you.
Related
I'm currently discovering modules with npm, and I went to use bootstrap-sass. Now that the modules were downloaded, I was looking for a solution to compile scss into the static folder of the application, and also the js bootstrap files.
But according to npmjs documentation of the modules, I can't found a simple solution which is not to move the js files myself and compile the scss bootstrap files from node_modules with something like node-sass.
What is the simplest way to use this module correctly and with the possibility to custom ?
Edit :
For now, I am using the following scripts/files :
"compile-js": "browserify assets/static/js/main.js | uglifyjs > assets/static/js/bundle.js",
"compile-sass": "node-sass assets/scss/app.scss assets/static/css/app.css --output-style compressed"
app.scss
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap-sprockets.scss";
#import "../../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss";
main.js
global.jQuery = require("jquery")
const bootstrap = require('bootstrap-sass');
I've never used bootstrap-sass before, but the documentation implies that a build tool to preprocess the SCSS is a prerequisite for using this module. While it's no longer the shiniest tool in the shed, Gulp is very capable of handling this task as well as moving the files from node_modules to your project root directory for you.
Here's a breakdown of one approach to implement this:
Create three subfolders in your project root directory and call them sass, css and javascript.
Create a file in the sass folder and call it app.scss. Open it and paste this: #import './node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss';. When the file is converted into CSS, all of the Bootstrap modules will be there. Beneath the #import statement on line 1, feel free to write whatever style rules you want.
Assuming you have already run npm init and have a package.json file in your project directory, run npm install gulp -D in your terminal. This installs gulp (my task runner of choice!).
Run npm install gulp-sass --save-dev. This installs the gulp plugin that will preprocess the Bootstrap SASS into CSS.
Create a file in your root directory (not in any of the subfolders) called gulpfile.js
Copy and paste this text into gulpfile.js:
(note: for this to work, your SASS and CSS folders must be called sass and css, respectively, unless you change their names in the following code.)
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass-to-css', function () {
return gulp.src('./sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('javascript', function () {
return gulp.src('./node_modules/bootstrap-sass/assets/javascripts/bootstrap.min.js')
.pipe(gulp.dest('./javascript'));
});
gulp.task('default', ['sass-to-css', 'javascript']);
Lastly, run the command gulp in your terminal to execute the gulpfile, which will do two things:
Preprocess and move all of the SASS into your css folder.
Copy bootstrap.min.js from node_modules into your project's javascript folder.
Of course, don't forget to link to these assets in your HTML.
I whipped up this gulpfile on the fly and it works on my machine, but if you decide to try this approach then feel free to ask if something throws an error. Best of luck on your project.
I've been looking for many hours at how to use SCSS in the Underscore theme that I downloaded with _sassify.
When I open the folder and I see the style.css and the folder with scss files, the theme use css but I want change and use the scss file.
I don't understand how to use it.
What is the process to use scss? Can someone help me with this?
Thanks
You have to use a preprocessor to compile scss to css. The theme uses css, this will not change. You do your changes in scss - then scss compiles to css. A preprocessor can be part of your IDE, you can use programs like Koala, Scout, Prepros or you use the sass command line.
You should start reading here:
http://sass-lang.com
Try compiling your first .scss files in a test directory with help of http://sass-lang.com/guide:
sass input.scss output.css
Then start tweaking _s.
I spent a few days how to change styles in Underscore Theme with scss files to css file. Earlier I worked with Gulp so I wanted to create gulpfile that will work. I created normal file with Gulp which at first didn't work - it worked in cmd, but on Wordpress nothing changed. But after adding a plugin WP-SCSS finally it works! So thanks a lot for your answer Jonathan and for helping me to find this plugin. Maybe it will help someone, so below I add the code from the gulpfile.
// gulpfile.js
var gulp = require("gulp"),
sass = require("gulp-sass"),
postcss = require("gulp-postcss"),
autoprefixer = require("autoprefixer"),
cssnano = require("cssnano"),
sourcemaps = require("gulp-sourcemaps");
function style() {
return (
gulp
.src(paths.source.src)
.pipe(sourcemaps.init())
.pipe(sass())
.on("error", sass.logError)
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.source.dest))
);
}
// $ gulp style
exports.style = style;
var paths = {
source: {
// By using styles/**/*.sass we're telling gulp to check all folders for any sass file
src: "sass/**/*.scss",
// Compiled files will end up in whichever folder it's found in (partials are not compiled)
dest: "."
}
};
function watch() {
gulp.watch("sass/**/*.scss", style);
}
// $ gulp watch
exports.watch = watch
You need to follow the steps from this page https://github.com/Automattic/_s
Setup
To start using all the tools that come with _s you need to install the necessary Node.js and Composer dependencies :
$ composer install
$ npm install
Available CLI commands
_s comes packed with CLI commands tailored for WordPress theme development :
composer lint:wpcs : checks all PHP files against PHP Coding Standards.
composer lint:php : checks all PHP files for syntax errors.
composer make-pot : generates a .pot file in the languages/ directory.
npm run compile:css : compiles SASS files to css.
npm run compile:rtl : generates an RTL stylesheet.
npm run watch : watches all SASS files and recompiles them to css when they change.
npm run lint:scss : checks all SASS files against CSS Coding Standards.
npm run lint:js : checks all JavaScript files against JavaScript Coding Standards.
npm run bundle : generates a .zip archive for distribution, excluding development and system files.
I'm not sure about the Underscore theme specifically, but I have used this plugin in the past and I really like it. It lets you use SCSS with any theme and automatically compiles the files for you.
I'm working on my first angularjs project and went with this framework generator (https://www.npmjs.com/package/generator-leptir-angular-bootstrap) to use bootstrap with scss/less.
The leptir uses gulp to compile (this works fine) but the bower_component bootstrap uses grunt to compile. My issue is that when I want to modify bootstrap less files, I need to compile the bootstrap.min.css with grunt, then rerun gulp watch in the parent directory to compile that min.css with the bower and custom scss, plus trigger the browser refresh, etc.
What I want to know is, is there a way I can directly run or artificially trigger a gulp task (in this case gulp watch) inside a gulpfile from a separate gruntfile?
I tried using grunt.touch after my scss is compiled, but that doesn't seem to trigger gulp watch. Any other thoughts?
my-project
|- public
|- bower_components
|- bootstrap
|- less (directory of all my bootstrap less files)
|- Gruntfile.js
|- package.json
|- app.scss (when changed, triggers gulp.watch)
|- gulpfile.js
|- package.json
So you are using Gulp and Grunt along with Less and Scss in one project? That sounds complicated without the need to be complicated. Any specific reason you are going for that setup or generator got you in that position?
I would suggest moving everything to gulp config and going with either less or either scss and avoid mixing those 2. While that technically can work i don't see a reason to do that, and it can raise complexity of your source code.
Let me know more details in the reply.
I used yeoman to scaffold an angular app like so:
yo angular --minsafe
Now, I'm trying to set up jade > html compilation using grunt-contrib-jade but I don't understand the huge Gruntfile.js generated for me.
There is a mountFolder function:
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
...and a yeoman config object:
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist'
};
when running grunt server chrome opens up and I get served my page. But where is this magic 'dist' folder that's been served? I can't find it on disk...
The dist folder is only created when you run the build grunt task. While you run grunt server, you get the combined contents of app/ and the .tmp/ folder served to you, whereby .tmp contains temporary build artifacts like compiled SASS stylesheets, compiled CoffeeScript files and it would be the place you want to keep your compiled jade output.
Im using yeoman for a project.
Basically it's working fine, but during the build process I want to move my images folder to somewhere else.
So I loaded the grunt-contrib-copy task which would let me do that. But unfortunately this conflicts with the yeoman built-in copy task.
Is there any way to alias the grunt-contrib-copy in my Gruntfile.js so I can use both of them?
grunt.loadNpmTasks('grunt-contrib-copy');
//Here I need to use "copy" again but not referencing the yeoman task but the grunt-contrib-copy task.
grunt.registerTask('build','intro clean coffee compass mkdirs concat css min replace copy time');
grunt.renameTask() will probably help you here. Try this:
// temporarily rename yeoman's copy task
grunt.renameTask('copy', 'yeomanCopy');
// load 'copy' from grunt-contrib-copy
grunt.loadNpmTasks('grunt-contrib-copy');
// rename it to something other than 'copy'
grunt.renameTask('copy', 'myCopy');
// rename yeoman's task back to its original name so nothing breaks
grunt.renameTask('yeomanCopy', 'copy');
// now use 'myCopy' for your purposes
// ...